<template>
  <div>
	  <div class="cho">
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item prop="month">
				<span class="choosemonth">选择月份查询:</span>
			<el-date-picker
				type="month"
				value-format="MM"
				@change="getSTime"
				placeholder="选择月份"
				v-model="formInline.month"
				style="width: 100%;"
			></el-date-picker>
			</el-form-item>
			<el-form-item>
			<!-- <el-button type="primary" size="small" @click="choose">筛选</el-button> -->
			</el-form-item>
		</el-form>
		</div>
      <div id="recuitedetailchart" :style="{width: '100%', height: '30vh'}"></div>
  </div>
</template>

<script>
import {get} from '../../utils/axios.tool'
export default {
    data() {
        return {
            formInline: {
				month: ''
			},
			sheetData:{},
			aa:[],
			bb:[]
        }
    },
    methods:{
		getData(){
			this.formInline.month = '01'
			let url = '/usermanage/recruit_date_board/'
			this.$axios.get(url,this.formInline).then(res=>{
                this.sheetData = res
				this.sheetData.map(item=>{
                    this.aa.push(item.area)
                    item.resume_final_rate.splice(-1,1)
					this.bb.push(item.resume_final_rate)
                })
				this.initEcharts()
			})
		},
		getSTime(val){
			this.formInline.month = val
			this.choose()
		},
		choose() {
		this.aa = []
		this.bb = []
		let url = "/usermanage/recruit_date_board/";
		this.$axios.get(url, this.formInline).then(res => {
            this.sheetData = res;
             this.sheetData.map(item=>{
                    this.aa.push(item.area)
                    this.bb.push(item.resume_final_rate)
				})
                    console.log(this.aa,this.bb)
                this.initEcharts()
		});
		},
        initEcharts(){
            let recuitedetailchart = this.$echarts.init(document.getElementById('recuitedetailchart'))
            // 绘制图表
            recuitedetailchart.setOption({
				title: {
						text: ''
					},
					tooltip : {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
                    },
                    color:'#2BB3D5',
					// legend: {
					// 	data:[]
					// },
					// grid: {
					// 	left: '3%',
					// 	right: '4%',
					// 	bottom: '3%',
					// 	containLabel: true
					// },
					xAxis : [
						{
							type : 'category',
							boundaryGap : false,
							data : this.aa
						}
					],
					yAxis : [
						{
							type : 'value'
						}
					],
					series : [
						{
							name:'完成率',
							type:'line',
							stack: '总量',
							areaStyle: {normal: {}},
							 data:this.bb,
							 itemStyle: {        //上方显示数值
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: '#2BB3D5',
                                            fontSize: 16
                                        }
                                    }
                                }
                            }
						},
					]
            });
        }
    },
    mounted(){
		this.getData()
    }
}
</script>

<style lang="less">
.choosemonth{
	font-size: 17px;
}
</style>